<template>
  <li>
    {{item.text}}--{{item.isCompleted | status}}
    <button>修改状态</button>
    <button>删除</button>
  </li>
</template>

<script>
export default {
  name:'TodoItem',
  props:["item"],
  filters:{
    status(v){
      return v ? "已完成" : "未完成"
    }
  }
}
</script>

<style lang="scss">
  li{
    color:#f00;
    list-style-type: none;
    button{
      border: 1px solid #f00;
      background-color: #09f;
    }
  }
</style>